<template>
  <div class="box">
    <div class="button">
      <div id="button" style="cursor: pointer" @click="drawer = true">数据选择</div>
    </div>
    <el-dialog
      title="选择数据"
      :visible.sync="drawer"
      width="30%"
    >
      <!--      :before-close="beforeClose"-->
      <div class="options">
        <h2 id="typeSelect">选择数据类型</h2>
        <el-cascader
          v-model="temp.equipmentNumber"
          :options="equipmentNumberOptions"
          :props="{ multiple: true }"
          collapse-tags
          clearable
          style="color: black"
          @change="disabledOptions"
        />
      </div>
      <div class="timeSelect">
        <h2 id="timeSelect">选择时间范围</h2>
        <el-date-picker
          v-model="temp.timeQuantum"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="beforeClose">确 定</el-button>
      </span>
    </el-dialog>
    <dv-border-box-10>
      <div :id="id" :style="{height,width} " class="line" />
    </dv-border-box-10>
    <!--    <div id="info">-->
    <!--      <div id="max" class="info-text">最大值：{{ maxNum }}{{ unit }}</div>-->
    <!--      <div id="min" class="info-text">最小值：{{ minNum }}{{ unit }}</div>-->
    <!--      <div id="avg" class="info-text">平均值：{{ avgNum }}{{ unit }}</div>-->
    <!--    </div>-->
  </div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import { updateRealTimeLineChart, fetchEquipmentNumberOptions } from '@/api/dataManagement'
import resize from '@/components/Charts/mixins/resize'
export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '390px'
    }
  },
  data() {
    return {
      drawer: false,
      equipmentNumberOptions: [
        {
          value: 'i1',
          label: '保护侧电位',
          disabled: false,
          children: [{
            'value': 'b1',
            'label': '编号1'
          }]
        },
        {
          value: 'i2',
          label: '未保护侧电位',
          disabled: false,
          children: [{
            value: 'b1',
            label: '编号1'
          }]
        },
        {
          value: 'i3',
          label: '南北地电位梯度',
          disabled: false,
          children: [{
            value: 'b1',
            label: '编号1'
          }]
        },
        {
          value: 'i4',
          label: '东西地电位梯度',
          disabled: false,
          children: [{
            value: 'b1',
            label: '编号1'
          }]
        }
      ],
      temp: {
        // equipmentNumber: [],
        equipmentNumber: [['i1', 'bd16265282985790001'], ['i1', 'bd16265284510910002'], ['i1', 'bd16265285067860003'], ['i1', 'bd16265285498460004']],
        timeQuantum: null
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近1小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近3小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近6小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 6)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近12小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 12)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近24小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近三天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      unit: null,
      maxNum: -0.3,
      minNum: -2.1,
      avgNum: -1.0
    }
  },
  created() {
    this.getEquipmentNumberOptions()
  },
  mounted() {
    this.timer = setInterval(this.update, 1000 * 60 * 15)
    this.getTime()
    this.$nextTick(() => {
      this.initChart()
      this.update()
      this.disabledOptions()
    })
  },
  beforeDestroy() {
    clearInterval(this.timer)
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    beforeClose() {
      this.drawer = false
      this.update()
    },
    disabledOptions() {
      if (this.temp.equipmentNumber.length !== 0) {
        this.equipmentNumberOptions.forEach(item => {
          item.disabled = item.value !== this.temp.equipmentNumber[0][0]
        })
      } else {
        this.equipmentNumberOptions.forEach(item => {
          item.disabled = false
        })
      }
    },
    update() {
      updateRealTimeLineChart(this.temp).then((res) => {
        this.chart.dispose()
        this.chart = null
        this.initChart()
        for (const re of res.data.series) {
          if (this.temp.equipmentNumber.length !== 0) {
            if (this.temp.equipmentNumber[0][0] === 'i3' || this.temp.equipmentNumber[0][0] === 'i4') {
              re.yAxisIndex = 1
            } else {
              re.yAxisIndex = 0
            }
          }
          re.showSymbol = true
          re.type = 'line'
          this.maxNum = res.data.maxNum
          this.minNum = res.data.minNum
          this.avgNum = res.data.avgNum
        }
        this.chart.setOption({
          series: res.data.series
        })
      })
      this.computedData()
    },
    getEquipmentNumberOptions() {
      fetchEquipmentNumberOptions().then((res) => {
        this.equipmentNumberOptions.forEach(item => {
          item.children = res.data.equipmentNumberOptions
        })
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
      this.chart.setOption({
        title: {
          show: true,
          text: '实时数据',
          textStyle: {
            color: '#fff',
            fontSize: 25
          },
          // textAlign: 'center'
          left: 'center',
          top: 10
          // right: '50px'
        },
        textStyle: {
          fontSize: 10,
          color: 'white'
        },
        colorBy: 'data',
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: 35,
          type: 'scroll',
          icon: 'rect',
          itemWidth: 20,
          itemHeight: 5,
          itemGap: 13,
          left: '60%',
          pageIconColor: '#fff',
          // right: '10%',
          textStyle: {
            fontSize: 16,
            color: 'white'
          }
        },
        grid: {
          top: 90,
          left: '5%',
          right: '6%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: {
          boundaryGap: ['40%', '40%'],
          name: '',
          type: 'time',
          nameGap: 1,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            },
            onZero: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              width: 1
            }
          }
        },
        dataZoom: {
          type: 'inside',
          show: true,
          start: 0
        },
        yAxis: [{
          type: 'value',
          name: '电位',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              fontSize: 14
            },
            formatter: '{value} V',
            fontStyle: 'italic',
            fontWeight: 'bold'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              width: 1,
              color: '#5c6489'
            }
          }
        }, {
          type: 'value',
          name: '梯度',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              fontSize: 14
            },
            formatter: '{value} mV',
            fontStyle: 'italic',
            fontWeight: 'bold'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              width: 1
            }
          }
        }],
        series: []
      })
    },
    computedData() {
      if (this.temp.equipmentNumber.length !== 0) {
        if (this.temp.equipmentNumber[0][0] === 'i3' || this.temp.equipmentNumber[0][0] === 'i4') {
          this.unit = 'mV'
        } else {
          this.unit = 'V'
        }
      }
    },
    getTime() {
      const start = new Date()
      const end = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
      this.temp.timeQuantum = [start, end]
    }
  }
}
</script>
<style>
.options {
   margin-top: 5px;
}
.box {
  /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
  transition: 0.3s;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 8px 16px 0 #151414;
  /*background-color: #162d7d;*/
  /*background-color: #2c3e50;*/
}
.box:hover {
  box-shadow: 0 8px 16px 0 #151414;
}
#button {
  background-color: #2c3e50;
  border: #2c3e50;
  color: #fff;
  font-size: 20px;
  left: 1px;
  top: 1px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.button {
  position: absolute;
  margin-left: 80px;
  margin-top: 20px;
  z-index: 99;
}
#tab-ChinaChart {
  /*font: ;*/
  color: #b3efff;
}
#tab-baiduMap {
  /*font: ;*/
  color: #b3efff;
}
#info {
  display: flex;
  flex-direction: row;
  position: absolute;
  color: white;
  bottom: 500px;
  right: 50px;
  justify-content: space-between;
}
.info-text {
  margin-right: 20px;
}
</style>
